<template>
  <view class="container">
    <!-- 头部导航 -->
    <view class="header">
      <view class="back-btn" @click="goBack">
        <image :src="getFullImageUrl('@/static/index/Back.png')" style="width: 15rpx;height: 26rpx;"></image>
      </view>
      <view class="title">讯飞语音听写</view>
      <view class="header-right"></view> <!-- 占位，保持标题居中 -->
    </view>
    
    <!-- 状态显示 -->
    <view class="status-bar">
      <text class="status-text">{{ statusText }}</text>
    </view>
    
    <!-- 识别结果显示区域 -->
    <view class="result-section">
      <view class="section-header">
        <text class="section-title">识别结果</text>
        <view class="section-actions">
          <button class="action-btn small" @click="clearResult" v-if="recognitionResult.trim()">
            清除
          </button>
          <button class="action-btn small" @click="copyResult" v-if="recognitionResult.trim()">
            复制
          </button>
        </view>
      </view>
      <textarea class="result-input" v-model="recognitionResult" placeholder="识别结果将显示在这里..." disabled></textarea>
    </view>
    
    <!-- 操作区域 -->
    <view class="action-section">
      <button class="voice-btn" :class="{ 'recording': isRecording }" @touchstart="startVoiceRecording" @touchend="stopVoiceRecording" @touchcancel="stopVoiceRecording">
        <image :src="isRecording ? getFullImageUrl('@/static/release/stop.png') : getFullImageUrl('@/static/release/mic.png')" class="voice-icon" />
        <text class="voice-btn-text">{{ isRecording ? '松开停止' : '按住说话' }}</text>
      </button>
      <text class="tips-text">请使用普通话，靠近麦克风清晰讲话</text>
    </view>
    
    <!-- 功能说明 -->
    <view class="description-section">
      <view class="desc-title">功能说明</view>
      <view class="desc-content">
        <text>该功能基于讯飞语音听写API，支持中文普通话、英语等多种语言的实时语音转文字。</text>
        <text>录音文件将被发送至服务器进行识别处理，请确保网络连接正常。</text>
      </view>
    </view>
  </view>
</template>

<script src="./index.js"></script>
<style lang="scss" src="./index.scss"></style>